<template>
	<div class="main">
		<div class="main-header" v-if="$getRouteAuth().button()">
			<el-button
				v-for="(item, index) in $getRouteAuth().button()"
				:key="index"
				:type="item.path | formatType"
				:icon="item.icon"
                v-show="item.name!='hidden'"
				:disabled="item.path | formatDisabled(selection)"
				@click="tapButton(item)"
				>{{ item.title }}
            </el-button>
		</div>
		<el-table
			:data="list"
			border
			header-cell-class-name="main-table-header"
			ref="table"
			class="main-table"
			height="100%"
			row-key="id"
			default-expand-all
			@selection-change="onSelectionChange"
			@row-click="onRowClick"
		>
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column
				label="ID"
				prop="id"
				width="100"
			></el-table-column>
			<el-table-column label="表单项名称" prop="label_name"></el-table-column>
            <el-table-column label="表单项类型" prop="control_type">
                <template slot-scope="{row}">
                    {{ row.control_type == 0 ? '输入框' : row.control_type == 1 ? '单选' : row.control_type == 2 ? '多选' : row.control_type == 3 ? '文本框' : ''  }}
                </template>
            </el-table-column>
            <el-table-column label="说明" prop="comment" ></el-table-column>
		</el-table>
		<!-- <el-pagination
			class="main-pagination"
			:current-page.sync="page"
			:page-size="limit"
			:total="total"
			@current-change="onCurrentChange"
			layout="total,jumper,prev,pager,next"
		></el-pagination> -->
		<add-template v-model="addShow" :editRows="editRows" @update="getList" @close="editRows = []"></add-template>
	</div>
</template>
<script>
import addTemplate from "./add.vue";
export default {
	data() {
		return {
			addShow: false,
			list: [],
            editRows:[],
			selection: [],
			total: 0,
			limit: 20,
			page: 1,
		};
	},
	components: {
		addTemplate,
	},
	computed: {
		buttons() {
			return this.$store.state.buttons;
		},
	},
	created() {
		this.getList();
	},
	methods: {
		async getList() {
			try {
				let res = await this.$get({
					url: "/admin/formoption.FormOption/index",
					loading: true,
                    params:{
                        option_cate_id:this.$route.query.id,
						page:this.page,
						limit:this.limit
                    }
				});
				this.total = res.total;
				this.list = res.list.filter((item)=>{
					return item.option_cate_id == this.$route.query.id
				});
			} catch (err) {
				this.$message.error(err);
			}
		},
        async deleteTemplate(){
            try{
                let query = "?";
                for (let i = 0; i < this.selection.length; i++) {
                    const item = this.selection[i];
                    if (i > 0) {
                        query += "&ids[]=" + item.id;
                    } else {
                        query += "ids[]=" + item.id;
                    }
                }
                await this.$del({
                    url:'/admin/formoption.FormOption/del' + query,
                    loading:true,
                    successTip:true,
                })
                this.getList()
            }catch(err){
                this.$message.error(err)
            }
        },
        goRules(id){
            this.$router.push('/templateoption?id='+id)
        },
		onRowClick(row) {
			this.$refs.table.toggleRowSelection(row);
			// this.$refs.info.show();
		},
		onSelectionChange(selection) {
			this.selection = selection;
		},
		onCurrentChange(index) {
			this.page = index;
			this.getList()
		},
        hasRule(){
            let has = this.buttons.find(item=>item.path=='rule')
            return has?true:false
        },
		tapButton(e) {
			switch (e.name) {
				case "add":
					this.addShow = true;
					break;
				case "delete":
					this.deleteTemplate()
					break;
				case "edit":
					this.editRows = JSON.parse(JSON.stringify(this.selection))
                    this.editRows.forEach((item)=>{
                        item.img = [{
                            url:item.img,
                            uid:Math.random().toFixed(10)
                        }]
                    })
					break;
				default:
					console.log("1");
					break;
			}
		},
	},
};
</script>
<style lang="less"></style>
